<script lang="ts" setup>
import { ref, h } from 'vue'

import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table'

import { Button, message, Spin } from 'ant-design-vue'
import type { VbenFormProps } from '#/adapter/form'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { useVbenModal } from '@vben/common-ui'
import { getMaterialSku } from '#/api/material'

const data = ref()
const emit = defineEmits(['share-data'])

interface RowType {
  address: string
  age: number
  id: number
  name: string
  nickname: string
  role: string
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: true,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '输入供应商或物料名称',
      },
      fieldName: 'quick_search',
      label: '快速查询',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  submitButtonOptions: {
    content: '查询',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: true,
}

const gridOptions: VxeGridProps<RowType> = {
  //   border: true,
  checkboxConfig: {
    highlight: true,
    // labelField: 'name',
  },
  height: '600px',
  columns: [
    { type: 'checkbox', width: 70, fixed: 'left' },
    { field: 'material_name', title: '物料名称', width: 150 },
    { field: 'supply_name', title: '供应商', width: 150 },
    { field: 'material_color', title: '物料颜色', width: 150 },
    { field: 'price', title: '物料单价', width: 150 },
    { field: 'unit', title: '单位', width: 150 },
    { field: 'cloth_width', title: '幅宽', width: 150 },
    { field: 'gram_weight', title: '克重', width: 150 },
    { field: 'stock', title: '库存', width: 150 },
  ],
  //   data: [],
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const { list,total } = await getMaterialSku({...data.value.query,...formValues, page: page.currentPage, pageSize: page.pageSize })

        return {
          items: list,
          total: total,
        }
      },
    },
  },
  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
  },
  pagerConfig: {
    // enabled: false,
  },
}

const gridEvents: VxeGridListeners<RowType> = {
  cellClick: ({ row }) => {
    // message.info(`cell-click: ${row.name}`);
  },
}

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridEvents, gridOptions })

const [Modal, modalApi] = useVbenModal({
  class: 'w-2/3',

  onCancel() {
    modalApi.close()
  },
  onConfirm() {
    const checkData = gridApi.grid.getCheckboxRecords()
    emit('share-data', { list: checkData || [] })
    modalApi.close()
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>()
      console.log('获取到的参数',data.value)
    }
  },
})
</script>
<template>
  <Modal title="物料列表">
    <Grid></Grid>
  </Modal>
</template>
